<!--
 * @Author: weidewei
 * @Date: 2025-05-15 09:42:09
 * @LastEditors: weidewei
 * @LastEditTime: 2025-05-16 17:22:57
 * @Description: 
 * @FilePath: \v2\src\views\home\index.vue
-->
<template>
  <div>
    <h2>home页面</h2>
    <router-link to="/home/detail">跳转到home-detail页面-基础用法</router-link>
    <br />
    <router-link to="/home/detail?id=88"
      >跳转到home-detail页面-路由传递参数</router-link
    >
    <br />
    <router-link :to="{ path: `/home/detail?id=888` }"
      >跳转到home-detail页面-动态路由传递参数</router-link
    >
    <br />
    <router-link :to="{ path: `/home/detail?id=888` }"
      >跳转到home-detail页面-动态路由传递query参数</router-link
    >
    <br />
    <router-link :to="{ path: `/home/detail`, query: { id: 888 } }"
      >跳转到home-detail页面-动态路由传递query参数-对象形式</router-link
    >
    <br />
    <router-link :to="{ name: `home-detail`, query: { id: 888 } }"
      >跳转到home-detail页面-命名动态路由传递query参数</router-link
    >
    <br />
    <router-link :to="{ name: `home-detail`, params: { id: 888 } }"
      >跳转到home-detail页面-命名动态路由传递param参数(params参数刷新页面会丢失)</router-link
    >
    <br />
    <router-link :to="{ path: `/home/detail`, params: { id: 888 } }"
      >跳转到home-detail页面-动态路由传递param参数(params参数刷新页面会丢失,用name的方式才能以对象的方式传params参数)</router-link
    >
    <br />
    <router-link to="/home/detail/888">跳转</router-link>
    <br />
    <router-link to="/about">跳转到about页面</router-link>
    <br />
    <router-link to="/asyncRoute">跳转到asyncRoute页面</router-link>
    <br />
    <router-link to="/splitTablePage">跳转到splitTablePage页面</router-link>
    <br />
    <router-link to="/vue-virtual-scroller">跳转到​vue-virtual-scroller页面</router-link>
    <br />
    <router-link to="/cavansTable">跳转到canvas-table页面</router-link>
    <br />
    <router-link to="/axiosPage">跳转到axios-page页面</router-link>
    <br />
    <router-link to="/newWorkerTable">跳转到newWorkerTable页面</router-link>
    <br />
    <button @click="goHomeDetail">编程式导航到home-detail</button>
    <br />
    <button type="primary" @click="handleLogin">登录</button>
    <button type="danger" @click="handleLogout">退出</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    goHomeDetail() {
      // this.$router.push({
      //     path: "/home/detail",
      //     params: {
      //         id: 888
      //     }
      // })
      // 传递params参数必须要在路由配置那里接收，否则刷新参数会丢失
      this.$router.push({
        name: "home-detail",
        params: {
          id: 888,
        },
      });
    },
    handleLogin() {
        localStorage.setItem("token","abc")
        alert("登录成功！")
    },
    handleLogout() {
        if(localStorage.getItem("token")) {
            localStorage.removeItem("token")
            alert("已退出！")
        }
    }
  },
};
</script>
